﻿
@{
    ViewData["Title"] = "SweetAlert";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Sweet Alert</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Miscellaneous</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Sweet Alert</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Sweet Alert</h5>
                </div>

                <div class="ibox-content">

                    <strong>An awesome replacement for JavaScript's alert.</strong>

                    <p>
                        SweetAlert automatically centers itself on the page and looks great no matter if
                        you're using a desktop computer, mobile or tablet. It's even highly customizeable,
                        as you can see below!
                        <a href="http://t4t5.github.io/sweetalert/" target="_blank">http://t4t5.github.io/sweetalert/</a>

                    </p>

                    <div class="row text-center">

                        <div class="col-lg-6 h-100 p-lg">
                            <p>A basic sweetalert message</p>
                            <button class="btn btn-primary btn-sm demo1">Run example</button>
                        </div>
                        <div class="col-lg-6 h-100 p-lg">
                            <p> A success message! </p>
                            <button class="btn btn-success btn-sm demo2">Run example</button>
                        </div>
                        <div class="col-lg-6 h-100 p-lg">
                            <p>A warning message, with a function attached to the "Confirm"-button...</p>
                            <button class="btn btn-warning btn-sm demo3">Run example</button>
                        </div>
                        <div class="col-lg-6 h-100 p-lg">
                            <p> ... and by passing a parameter, you can execute something else for "Cancel". </p>
                            <button class="btn btn-danger btn-sm demo4">Run example</button>
                        </div>





                    </div>
                    <div class="m-t-md">
                        <p>
                            You can easy add sweet alert in your script by adding code (example from warning button):
                        </p>
                        <pre>
$('.demo3').click(function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }, function () {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    });
});</pre>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <environment names="Development,Staging,Productio">
        <link rel="stylesheet" href="~/lib/sweetalert/dist/sweetalert.css" />
    </environment>
}

@section Scripts {
    <environment names="Development">
        <script src="~/lib/sweetalert/dist/sweetalert-dev.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/sweetalert/dist/sweetalert.min.js"></script>
    </environment>

    <script type="text/javascript">
        $(document).ready(function () {

            $('.demo1').click(function () {
                swal({
                    title: "Welcome in Alerts",
                    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                });
            });

            $('.demo2').click(function () {
                swal({
                    title: "Good job!",
                    text: "You clicked the button!",
                    type: "success"
                });
            });

            $('.demo3').click(function () {
                swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false
                }, function () {
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");
                });
            });

            $('.demo4').click(function () {
                swal({
                    title: "Are you sure?",
                    text: "Your will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                },
                    function (isConfirm) {
                        if (isConfirm) {
                            swal("Deleted!", "Your imaginary file has been deleted.", "success");
                        } else {
                            swal("Cancelled", "Your imaginary file is safe :)", "error");
                        }
                    });
            });

        });
    </script>
}